<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索结果</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/resultSearch.css">
    <script src="js/rem.js"></script>

</head>

<body>

    <div id="app">
        <div class="top">
            <a href="index.html" class="back_ico"></a>
            <i class="search_ico"></i><input type="text" placeholder="请在此输入" class="search_c" @click="searchPage">
            <input type="button" value="搜索" class="search_btn" @click="search">
        </div>
        <div class="content">
            <div class="mui-content">
                <ul>
                    <li v-for="(item, index) in contentData" :key="index" :ids="item.id" @click="list($event,item.id)" ref="dom">
                        <div class="list">
                            <div class="left"><img :src="item.albums[0]"></div>
                            <div class="right ">
                                <h3 class="tit">{{item.title}}</h3>
                                <p class="line_three_hide">{{item.imtro}}</p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>

    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script>
        var Vm = new Vue({
            el: "#app",
            data: {
                url: "http://apis.juhe.cn/cook/query.php",
                key: "f25836940c8c65d4021f569c21e8e1dd",
                contentData:"",
                ids:""
            },
            created() {
                
            },
            mounted() {
                this.getUrl();
            },
            methods: {
                //获取url里面的参数
                getUrl:function(){
                    var data = decodeURI(location.href).split('?')[1].split('=')[1];
                    this.$http.jsonp(this.url + '?key=' + this.key + '&menu=' + data).then(
                        function (res) {
                            var retData = res.body.result.data;
                            console.log(retData);
                            
                            this.contentData = retData
                            


                        })
                    
                },
                search: function () {
                    location.href = "list.html?id="+this.id
                },
                searchPage:function(){
                    location.href = "search.html"
                },
                list:function(e,id){
                    
                
                    
                    location.href = "list.html?id="+id

                },
            },
        })
    </script>
</body>

</html>